<template>
    <div class="app">
        <div class="order">
            <div class="header">
                <h4>饿了么</h4>
                <div class="tabbar">
                    <div class="tab" v-for="(item,index) in tabList" :key="index">{{item}}</div>
                </div>
            </div>

            <div class="orderList" v-for="(item,index) in orderList" :key="index">
                <div class="txt">
                    <div class="tit">
                        <h4>{{item.name}}</h4>
                        <div>已送达</div>
                    </div>
                    <div class="img">
                        <img :src="item.pic" alt="">
                        <div class="price">
                            <div>￥：{{item.price}}</div>
                            <div>共{{item.num}}件</div>
                        </div>
                    </div>
                </div>
                <div class="button">
                     <button>再来一单</button>
                </div>
               
            </div> 
            
        </div>
    </div>
  
</template>

<script>
import pic1 from "../assets/1.png"
import pic2 from "../assets/5.png"
import pic3 from "../assets/3.png"
export default {
    data(){
        return{
            tabList:["全部","待消费","待评价","退款"],
            orderList:[
                {name:"纯手工饺子(凤城九路店)",pic:pic1,price:17.8,num:2},
                {name:"唐久便利(海荣名域店)",pic:pic2,price:18.8,num:3},
                {name:"纯手工饺子(凤城九路店)",pic:pic3,price:28.8,num:2}
        ]
        }
    }
}
</script>

<style scoped>

.order{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #f5f5f5;
    box-sizing: border-box;
    padding: 10px;
}
.header h4{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
}
.header .tabbar{
    display: flex;
}
.tabbar .tab{
    margin-right: 30px;
    margin-bottom: 10px;
}
.orderList{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: white;
    border-radius: 5px;
    margin-bottom: 10px;
}
.tit ,
.img{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0;
}
.tit div{
    color: gray;
    font-size: 14px;
}
.img img{
    width: 60px;
    height: 60px;
}
.price{
    display: flex;
     align-items:flex-end;
    flex-direction: column;
   
}
.price div:last-child{
    color: gray;
    font-size: 14px;
    margin-top: 10px;
}
.orderList button{
    width: 100px;
    height: 40px;
    font-size: 16px;
    font-weight: bolder;
    border-radius: 20px;
    border:1px solid rgb(31, 149, 196);
    color: rgb(31, 149, 196);
    background-color: white;
}
.button{
    display: flex;
    justify-content: right;
}
</style>